<template>
	<view class="page">
		<navigation defaultButton="back">机构展示</navigation>
		<view class="container">
			<view class="select_panel">
				<view class="select_item" v-for="(item,index) in selectList" :key="index" :class="{'select_active':item.isActive}"
				 @tap="statusChange(index,item)">{{item.label}}</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="page_scroll" scroll-with-animation="true" enable-back-to-top="true" @scrolltolower="scrollBottom">
			<view class="scroll_panel">
				<view class="card" v-for="(item,index) in dataList" :key="index" @tap="goAgencyDetail(item,index)">
					<view class="card_left">
						<view class="card_image-panel__bg">
							<image class="card_image-bg" src="https://images-vx.oss-cn-beijing.aliyuncs.com/images-vx/ranking01.png" mode="" v-if="index == 0"></image>
							<image class="card_image-bg" src="https://images-vx.oss-cn-beijing.aliyuncs.com/images-vx/ranking02.png" mode="" v-if="index == 1"></image>
							<image class="card_image-bg" src="https://images-vx.oss-cn-beijing.aliyuncs.com/images-vx/ranking03.png" mode="" v-if="index == 2"></image>
							<image class="card_image" :src="item.img || item.companyImages || ''" mode=""></image>
						</view>
						<view class="ranking" :style="{'color':rankingTextColor(index)}">NO.{{index+1}}</view>
					</view>
					<view class="card_right">
						<view class="title">{{item.name}}</view>
						<!-- <view class="type">服务类型：{{item.type}}</view> -->
						<view class="info">
							<view class="serve_num">服务数量：{{item.instituteNum}}</view>
							<view class="serve_rate">服务评价：{{item.companyStarNum}}</view>
						</view>
					</view>
				</view>
				<view class="no-data">
					<view class="more"><uni-load-more :status="moreStatus" :content-text="moreContentText" iconType="spinner" color="#666666"></uni-load-more></view>
				</view>
			</view>
		</scroll-view>
		<!-- <image class="page_bg" src="https://images-vx.oss-cn-beijing.aliyuncs.com/images-vx/page_bg.png" mode="aspectFit"></image> -->
	</view>
</template>

<script>
	import * as modelApi from '@/api/userApi/model.js'
	export default {
		data() {
			return {
				enums: this.$enums,
				selectList: [
					{
						isActive: true,
						label: '服务数量排行'
					},
					{
						isActive: false,
						label: '服务质量排行'
					}
				],
				dataList: [],
				// more
				moreStatus: 'more',
				moreContentText: {
					// 加载各状态文字说明。
					contentdown: '加载更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多了'
				},
				searchModel: {
					queryType: this.$enums['机构排行状态']['服务数量排行'],
					current: 1,
					size: 10
				}
			};
		},
		onShow() {
			this.getList();
		},
		methods: {
			getList() {
				this.moreStatus = 'loading';
				modelApi
					.queryAgency(this.searchModel)
					.then(res => {
						if (res.code === 0) {
							if (this.searchModel.current == 1) {
								this.dataList = [];
							}
							if (res.data && res.data.length == 10) {
								this.moreStatus = 'more';
								this.searchModel.current += 1;
								this.dataList = [...this.dataList, ...res.data];
							} else if (res.data && res.data.length < 10) {
								this.moreStatus = 'noMore';
								this.searchModel.current += 1;
								this.dataList = [...this.dataList, ...res.data];
							} else {
								this.moreStatus = 'noMore';
							}
						}
					})
					.catch(e => {
						this.moreStatus = 'noMore';
						uni.showToast({
							title: e.msg,
							icon: 'none',
							duration: 1000
						});
					});
			},
			statusChange(index, item) {
				this.selectList.map(item => {
					item.isActive = false;
				})
				this.$set(this.selectList[index], "isActive", true);
				if (this.$enums['机构排行状态'][item.label] != this.searchModel.queryType) {
					this.searchModel.queryType = this.$enums['机构排行状态'][item.label];
					this.searchModel.current = 1;
					this.dataList = [];
					this.getList();
				}
			},
			goAgencyDetail(item,index = 0) {
				index+=1;
				uni.navigateTo({
					url: `/pages/index/agencyShow/agencyDetail/agencyDetail?id=${item.id}&index=${index}`
				});
			},
			rankingTextColor(index) {
				let color = '';
				if (index == 0) color = 'rgba(255, 196, 18, 1)';
				else if (index == 1) color = 'rgba(194, 195, 196, 1)';
				else if (index == 2) color = 'rgba(244, 145, 90, 1)';
				return color;
			},
			// 滑动到底部。分页处理
			scrollBottom() {
				this.getList();
			}, 
		}
	}
</script>

<style lang="stylus">
	.page {  
		background url('https://images-vx.oss-cn-beijing.aliyuncs.com/images-vx/page_bg.png') no-repeat;
		background-size 100% 100%;
	}

	.page_scroll {
		position absolute;
		top calc(477rpx + var(--status-bar-height));
		right 0rpx;
		bottom 0rpx;
		left 0rpx;

		.scroll_panel {
			min-height 100%;
			margin 0rpx 30rpx;
			box-sizing border-box;
			background-color #FFFFFF;

			.card {
				display flex;
				justify-content space-between;
				padding 30rpx 50rpx 0rpx 50rpx;
				box-sizing border-box;

				&:first-child {
					padding-top 20rpx;
				}

				&:last-child {
					padding-bottom 30rpx;
				}

				.card_left {
					display flex;
					flex-direction column;
					align-items flex-start;
					justify-content center;
					width: 143rpx;
					position relative;

					.card_image-panel__bg {
						width: 110rpx;
						height: 110rpx;
						display flex;
						align-items center;
						justify-content center;

						.card_image-bg {
							position absolute;
							z-index 99;
							width: 143rpx;
							height: 140rpx;
							top -23rpx;
							left -27rpx; 
							align-self: baseline !important;

							&:nth-of-type(1) {
								width: 141rpx;
								height: 135rpx;
							}

							&:nth-of-type(2) {
								width: 140rpx;
								height: 135rpx;
							}
						}

						.card_image {
							width: 110rpx;
							height: 110rpx;
							border-radius 12rpx;
						}
					}

					.ranking {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #666666;
					}
				}

				.card_right {
					flex 1;
					margin-left 20rpx;
					display flex;
					flex-direction column;

					.title {
						width 100%;
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
					}

					.type {
						margin-top 15rpx;
						width 100%;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FF7D21;
					}

					.info {
						margin-top 50rpx;
						width 100%;
						display flex;
						align-items center;

						.serve_num,
						.serve_rate {
							padding 5rpx 20rpx;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #008AFF;
							background: rgba(0, 138, 255, 0.1);
							border-radius: 10rpx;
						}

						.serve_rate {
							margin-left 20rpx;
							color rgba(255, 66, 0, 1);
							background-color rgba(252, 109, 93, 0.1);
						}
					}
				}
			}
		}
	}

	.page_bg {
		position absolute;
		width 100%;
		height 100%;
		z-index -1;
	}

	.container {
		padding 0rpx 30rpx;
		box-sizing border-box;
		position relative;
	}

	.select_panel {
		margin-top 280rpx;
		width 100%;
		padding 0rpx 0rpx;
		display flex;
		align-items center;
		justify-content space-between;
		height 80rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background-color #FFFFFF;

		.select_item {
			flex 1;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			display flex;
			align-items center;
			justify-content center;
		}

		.select_active {
			color #333333;
		}
	}
</style>
